<template>
  <div class="main-box">
    <el-row>
      <el-col :span="24">
        <h2>登录</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-row>
            <el-col :span="4">
                <label>用户名</label>
            </el-col>
            <el-col :span="20">
                <el-input v-model="userInfo.username" placeholder="用户名" clearable />
            </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-row>
            <el-col :span="4">
                <label>密　码</label>
            </el-col>
            <el-col :span="20">
                <el-input v-model="userInfo.password" type="password" placeholder="密码" show-password/>
            </el-col>
        </el-row> 
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-row>
            <el-col :span="4"></el-col>
            <el-col :span="20">
                <button  class="black" @click="login">登录</button>
            </el-col>
        </el-row>
        
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import EventBus from '../until/EventBus'
import { ElMessage } from 'element-plus'
export default {
  name: "",
  setup() {
    const router = useRouter()
    const store = useStore()
    //用户信息
    const userInfo = ref({
      username: "",
      password: "",
    });
    //登录
    const flag = ref({})
    const login = ()=>{
      store.dispatch('login',userInfo.value).then(()=>{
        EventBus.emit('visibleValue',false)
        ElMessage({
          showClose: true,
          message: '登录成功',
          center: true,
        })
        router.push('/')
      })
    }

    onMounted(() => {});
    return {
      userInfo,login
    };
  },
};
</script>
<style scoped lang='scss'>

.main-box{
    width: 100%;
    border: 1px rgb(202, 202, 202) solid;
    padding: 20px;
    border-radius: 5px;
    .el-row {
        margin-bottom: 20px;
    }
    .el-row:last-child {
        margin-bottom: 0;
    }
    .el-row:last-child{
        button{
            width:100%;
            padding: 5px 0;
            background-color:#303133 ;
            color: white;
            cursor: pointer;
            border: none;
            letter-spacing:5px;
            text-align: center;
        }
        button:hover{
          opacity: 0.9;
        }
        
    }
}
.myflex{
    display: flex;
}
</style>